iT邦幫忙

第 11 屆 iThome 鐵人賽

DAY 28
0
自我挑戰組

網頁排版個人學習筆記系列 第 28

RWD| 常見響應式選單-2

  • 分享至 

  • xImage
  •  

文章前提

固定式漢堡選單設計


固定式漢堡選單 範例

固定式漢堡選單示意圖
步驟
固定式漢堡選單與上一篇文章漢堡選單步驟差不多,差在後方header與content處理方式,前段就當複習囉XD

  • 此篇載具一樣由桌機寫到手機

  • 架設好桌機架構header(logo , desktop-menu , mobile-menu )、content

  • 開始進入平板手機的media query設定→ @media(max-width:768px){ }

    • desktop-menu與header分別做absolute與relative讓desktop-menu移至header下方,並把寬度100%左置右延伸。
    • desktop-menu隱藏,另外加動態active,讓jQuery啟用它
  • 把header固定於上方,網頁往下滑時依舊於原處

.header{
    Position:fixed;
}
  • header固定住時,content會被遮住。content需往下推一個header高度
.content{
    Padding:/*header高度*/;
}

固定式漢堡選單header示意圖


固定式漢堡選單,小螢幕需注意

使用position fixed效果時,要留意header fixed是否會佔手機板面太大的空間,
有些效能較低的手機可能會不支援position fixed的作法。


上一篇
RWD| 常見響應式選單-1
下一篇
RWD| off Canvas(滑動導航)選單設計
系列文
網頁排版個人學習筆記30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言